<template>
<div>
  <van-nav-bar title="阿林头条-登录"/>
  <!-- vant-form是整个表单组件 -->
  <van-form @submit="onSubmit">
   <van-field
    v-model="user.mobile"
    required
    name="mobile"  
    label="手机号"
    placeholder="请输入11位手机号"
    :rules="[{ required: true, message: '请正确输入手机号' ,pattern:/^1[3-9]\d{9}$/}]"
  />
  <van-field
    v-model="user.code"
    type="password"
    required
    name="code"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '密码格式不对',pattern:/^\d{6}$/ }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" 
      :loading="isloading"  
      loading-text="正在登录..."
      :disabled="false">登录</van-button>
  </div>
</van-form>
</div>
</template>

<script>
import {setToken} from '@/utils/token.js'
import {loginApi} from '@/api/index.js'
import { Notify } from 'vant';
export default {
  data() {
    return {
      isloading:false,
      user:{
        mobile:'', //手机号
        code:''   //密码必须是246810  无论手机号是什么
      }
    };
  },
  methods: {
   async onSubmit(values) {  //事件提交的方法,事件整体通过后才会触发 values表示收集参数的一个对象
    this.isloading = true;
  try {  //如果成功弹出成功的消息
     const req=await loginApi(this.user)
     Notify({ type: 'success', message: '登录成功' });
     setToken(req.data.data.token)
     localStorage.setItem('refresh_token',req.data.data.refresh_token)
     //跳转一定要写在最后
     this.$router.replace(this.$route.query.path || '/layout')
  } catch (error) { //如果失败就弹出失败并且弹出失败的信息
      Notify({ type: 'danger', message: error.response.data.message });
  }
     this.isloading = false
    },
  },
}
</script>

<style lang="less" scoped>
.van-nav-bar{  //此class类名是组件内部的类名
  background-color:#007bff
}
/deep/ .van-nav-bar__title{  //  /deep/是less的语法 如果开启了scoped 默认找不到属性后面选择器 所以找不到选择器
  color: white;
}
</style>